<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue.js"></script>
  <!-- <script src="./js/jquery-1.12.4.js"></script> -->
   <script src="./js/axios.js"></script>
</head>

<body>
  <!-- 视图 -->
  <div class="" id="app">

    <input type="text" v-model="msg">
    <!-- 插值 -->
    {{msg}}

    {{dd}}

    <button v-on:click="xg">修改数据</button>
    <button @click="xh">销毁对象</button>



  </div>

  <!-- 视图模型 -->
  <script>
    let vm = new Vue({
      el: "#app",//挂载元素的位置
      // 模型
      data: {
        msg: "hello vue",
        dd:[]
        // data1:"1",
      },
      // 存放所有的方法,在挂载之后调用的方法
      methods: {
        xg() {
          this.msg = "bu hello"
        },
        xh() {
          this.$destroy();
        },
        data1() {

          axios.get("https://api.qqsuu.cn/api/dm-mgjuzi").then(res=>{
            console.log(res);
            this.dd = res.data;
            
          })
        }
      },
      // 初始化阶段
      beforeCreate() {
        console.log('创建前阶段');

      },
      created() {
        console.log('创建后');
        this.data1();

      },
      // 挂载
      beforeMount() {
        console.log('挂载前');

      },
      mounted() {
        console.log('挂载');

      },
      // 更新
      beforeUpdate() {
        console.log('更新前');

      },
      updated() {
        console.log('更新');

      },
      // 销毁
      beforeDestroy() {
        console.log('销毁前');

      },
      destroyed() {
        console.log('销毁');

      },
    })
  </script>
</body>

</html>